<template>
	<view class="container">
		<uni-section title="照片圈" type="line">
			<uni-card title="欢迎来到照片圈" :isFull="true" sub-title="分享世界的美" extra="美好随机记录" :thumbnail="avatar" class="uni-card">
				<view class="nav-btn">
					<uni-easyinput clear-size="12" suffix-icon="search"></uni-easyinput>
					<button size="mini" type="primary" class="publish" @click="publishBtn">发布</button>
				</view>
				<view class="content">
					<view v-for="(item,index) in list" class="content">
						<view class="head" @click="photoCircle(item.userId)">
							<image :src="item.avatar" class="avatar"></image>
							<text class="nickname">{{item.nickName}}</text>
							<view class="createtime"><text>{{item.createTime}}</text></view>
						</view>
						<view class="content">
							<view class="contentheader"><text>{{item.content}}</text></view>
							<image v-if="item.imgs" :src="img" v-for="(img,index) in item.imgs" @tap="preivewImageBtn(img)" class="img"></image>
							<view class="oper">
								<view class="like">
									<uni-icons  type="heart" size="20" @click="likeBtn(item)" v-if="!item.like"></uni-icons>
									<text  v-if="!item.like">点赞</text> 
									<uni-icons  type="heart-filled" size="20" color="red"  @click="likeBtn(item)"  v-if="item.like"></uni-icons>
									<text  v-if="item.like">已点赞</text> 
									<text style="margin-left: 4px;">11</text> 
									<text @click="openMoreLike(item.id)" class="uniui-more">
										<uni-icons  type="eye" size="20"></uni-icons>
									</text>
								</view>
								<view class="comment" >
									<uni-icons type="chatbubble" size="20" @click="openComment(item.id)" ></uni-icons>
									评论 
									<text style="margin-left: 4px;">12</text> 
									<text @click="openMoreComment(item.id)" class="uniui-more">
										<uni-icons  type="eye" size="20"></uni-icons>
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-card>
		</uni-section>
		<view>
			<uni-popup ref="commentPopup" background-color="#fff" type="bottom">
				<view class="popup-content-comment">
					<uni-easyinput class="commentInput"  v-model="commentData" type="textarea" focus="true"
					placeholder="友好评论"></uni-easyinput>
					<button size="mini" type="primary" @click="sendComment">评论</button>
				</view>
			</uni-popup>
			<uni-popup ref="popup" background-color="#fff" type="bottom">
				<view class="popup-content">
					<scroll-view :scroll-top="scrollTop"  :style="{ height: scrollHeightLike + 'px' }" scroll-y="true"  @scrolltoupper="upper"
						@scrolltolower="lower" @scroll="scroll" ref="contentRef">
						<image :src="img.avatar" class="avatarlike" v-for="(img,index) in likeList"  @click="photoCircle(img.id)"></image>
					</scroll-view>
				</view>
			</uni-popup>
			<uni-popup ref="popupComment" background-color="#fff" type="bottom">
				<view class="popup-content-comment">
					<scroll-view :scroll-top="scrollTop"  :style="{ height: scrollHeight + 'px' }" scroll-y="true"  @scrolltoupper="upper"
						@scrolltolower="lower" @scroll="scroll" ref="contentRef">
						<view v-for="(item,index) in commentList">
							<view  class="commentdata"   @click="photoCircle(item.userId)">
								<image :src="item.avatar" class="avatarcomment" ></image>
								<text class="nickname">{{item.nickName}}:</text>
								<text class="createtime">{{item.createTime}}</text>
							</view>
							<view class="comments">
								{{item.content}}
							</view>
						</view>
					</scroll-view>
				</view>
			</uni-popup>
		</view>
		<uni-drawer ref="showRight" mode="right">
			<view class="publish-head">
				<text>发布一条内容</text>
			</view>
			<scroll-view style="height: 82%;" scroll-y="true">
				<view class="publishcontent">
					<uni-forms :rules="rules" ref="baseForm" :modelValue="baseFormData" label-position="top">
						<uni-forms-item label="描述">
							<uni-easyinput type="textarea" v-model="baseFormData.content" placeholder="请输入描述" />
						</uni-forms-item>
						<uni-forms-item label="上传图片" required  name="imgs">
							<uni-file-picker limit="9" file-mediatype="image" v-model="baseFormData.imgs" @select="select"   title="最多选择9张图片"  :image-styles="imageStyles"></uni-file-picker>
						</uni-forms-item>
						<uni-forms-item label="可转发">
							<switch   style="transform:scale(0.7)" :checked="baseFormData.forward"   
							@change="switchForward"/>
						</uni-forms-item>
						<uni-forms-item label="可下载">
							<switch  style="transform:scale(0.7)" :checked="baseFormData.download" 
							@change="switchDownload"/>
						</uni-forms-item>
					</uni-forms>
				</view>
			</scroll-view>
			<view class="button-group">
				<button type="primary" size="mini" @click="save(baseForm)">保存</button>
				<button type="info" size="mini" @click="close">取消</button>
			</view>
		</uni-drawer>
	</view>
</template>

<script lang="ts" setup>
import {ref,nextTick} from 'vue'

const likeBtn=(item)=>{
	item.like = !item.like
}

const imageStyles = ref({
	width:150,
	height:150,
})

const rules=ref({
		imgs: {
			rules: [{
				required: true,
				errorMessage: '图片不能为空'
			}]
		}
}) 
const baseForm=ref()
const baseFormData=ref({
	content:'',
	download:false,
	forward:false,
	imgs:[]
})
const switchForward=(e)=>{
	baseFormData.value.forward = e.detail.value
}
const switchDownload=(e)=>{
	baseFormData.value.download = e.detail.value
}
const select=(e)=>{
	console.log(e)
	baseFormData.value.imgs.push(e.tempFiles[0])
}

const showRight=ref()

const close=()=>{
	showRight.value.close()
}

const save=(baseFormRef)=>{
	baseFormRef.validate().then((res)=>{
		close()
	}).catch(err =>{
		console.log('err', err);
	})
}

const publishBtn=()=>{
	console.log("发布")
	showRight.value.open()
}

const photoCircle=(userId)=>{
	uni.navigateTo({
		url:"/pages/my/photocircle/index?userId="+userId
	})
}
const preivewImageBtn=(item)=>{
		// 预览图片
		uni.previewImage({
			urls: [item],
			longPressActions: {
				itemList: ['保存'],
				success: function(data) {
					// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					if(data.tapIndex == 0)[
						//保存图片
						uni.saveImageToPhotosAlbum({
							filePath: item,
							success: function () {
							}
						})
					]
				},
				fail: function(err) {
					// console.log(err.errMsg);
				}
			}
		});
}
const avatar=ref('https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg')
const list=ref([
	{
		userId:1,
		avatar:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水',
		content:'金山银山，不如绿水青山',
		imgs:[
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
		],
		createTime:'2023-12-12 22:22:33',
		id:1,
		like:false,
	},
	{
		userId:2,
		avatar:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'嗨森',
		content:'开一道门，看见更多的风景',
		imgs:[
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
		],
		createTime:'2023-12-12 22:22:33',
		id:2,
		like:true,
	},
	{
		userId:3,
		avatar:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'小龙',
		content:'人间自有美好在',
		imgs:[
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
		],
		createTime:'2023-12-12 22:22:33',
		id:3,
		like:false,
	},
	{
		userId:4,
		avatar:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水',
		content:'金山银山，不如绿水青山',
		imgs:[
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
		],
		createTime:'2023-12-12 22:22:33',
		id:4,
		like:true,
	},
	{
		userId:5,
		avatar:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水',
		content:'金山银山，不如绿水青山',
		imgs:[
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
		],
		createTime:'2023-12-12 22:22:33',
		id:5,
		like:false,
	},
	{
		avatar:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水',
		content:'金山银山，不如绿水青山',
		imgs:[
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
		],
		createTime:'2023-12-12 22:22:33',
		id:6,
		like:false,
	}
])
const popup=ref()
const openMoreLike=(id)=>{
	console.log("点赞")
	popup.value.open('bottom')
}
const popupComment=ref()
const openMoreComment=(id)=>{
	console.log("评论")
	popupComment.value.open('bottom')
}

const commentPopup=ref()
const openComment=(id)=>{
	commentPopup.value.open('bottom')
}

const commentData=ref()

const sendComment=()=>{
	console.log("评论内容"+commentData.value)
	commentPopup.value.close()
}

const commentList=ref([
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水粉丝1号',
		createTime:'2023-12-23 12:12:12',
		content:'这2只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊',
		userId:1
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水粉丝2号',
		createTime:'2024-12-23 12:12:12',
		content:'这2只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊',
		userId:2
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水粉丝3号',
		createTime:'2025-12-23 12:12:12',
		content:'这2只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊',
		userId:3
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水粉丝4号',
		createTime:'2026-12-23 12:12:12',
		content:'这2只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊',
		userId:4
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水粉丝4号',
		createTime:'2026-12-23 12:12:12',
		content:'这2只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊'
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水粉丝4号',
		createTime:'2026-12-23 12:12:12',
		content:'这2只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊'
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水粉丝8号',
		createTime:'2026-12-23 12:12:12',
		content:'这2只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊'
	}
])
const likeList=ref([
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:1
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:2
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:3
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:4
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:5
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:1
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:2
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:3
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:4
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:5
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:1
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:2
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:3
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:4
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:5
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:1
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:2
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:3
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:4
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:5
	}
])
const scrollTop=ref(0)
	const showTop=ref(false)
	const scrollHeight=ref(300)
	const scrollHeightLike=ref(100)
	const detail=(id)=>{
		uni.navigateTo({
			url:'/pages/my/photocircle/detail?id='+id
		})
	}
	const old=ref({
		scrollTop: 0
	})
	const upper=(e)=> {
		console.log(e)
	}
	const lower=(e)=> {
		console.log(e)
	}
	const scroll=(e)=> {
		console.log("japde:"+e.detail.scrollTop)
		if(e.detail.scrollTop > 0){
			showTop.value=true;
		}else{
			showTop.value=false;
		}
		console.log(e)
		old.value.scrollTop = e.detail.scrollTop
	}
	const contentRef=ref()
	const goTop=(e)=>{
		// 解决view层不同步的问题
		scrollTop.value = old.value.scrollTop
		 nextTick(function() {
			scrollTop.value = 0
		}); 
		
	}
	const res = uni.getSystemInfoSync();
	const screenWidth = res.screenWidth;
	const screenHeight = res.screenHeight;
	console.log("App d load"+screenHeight);
	scrollHeight.value = screenHeight/2
</script>

<style lang="scss">
	.commentInput{
		margin-right: 3%;
		height: 100%;
		margin-bottom: 11%;
	}
	.popup-content-comment {
		display:  flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 100px;
		background-color: #fff;
	}
	.publish-head{
		height: 8%;
		display: flex;
		align-items: center;
		text-indent: 1em;
		border-bottom: 1px dashed gray;
	}
	.button-group {
		text-align: center;
		height: 10%;
		display: flex;
		align-items: center;
		border-top: 1px dashed gray;
	}
	.publishcontent{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding-top: 2%;
		padding-left: 2%;
		padding-bottom: 2%;
	}
	.nav-btn{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.publish{
		margin-left: 1%;
	}
	.commentdata{
		display: flex;
		align-items: center;
		margin-top: 3%;
		font-size: 13px;
		justify-content: space-between;
	}
	.avatarcomment{
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 1.5%;
	}
	.nickname{
		width: 40%;
		font-weight: 600;
	}
	.createtime{
		width: 50%;
		text-align: right;
		padding-right: 3%;
	}
	.comments{
		font-size: 13px;
		margin-right: 2.5%;
		text-indent: 2em;
	}
	
	.popup-content {
		// display:  flex;
		// align-items: center;
		// justify-content: center;
		padding: 15px;
		height: 20%;
		padding-bottom: 20px;
		padding-left: 8%;
		text-align: left;
	}
	.popup-content-comment {
		// display:  flex;
		// align-items: center;
		// justify-content: center;
		padding: 15px;
		height: 100%;
		padding-bottom: 20px;
	}
	.avatarlike{
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 2%;
	}
	.uniui-more{
		margin-left: 5px;
	}
	.like{
		display: flex;
		align-items: center;
	}
	.comment{
		display: flex;
		align-items: center;
	}
	.oper{
		display: flex;
		justify-content: space-between;
		padding: 3%;
	}
	.container{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.uni-card{
	}
	.content{
		margin-top: 3%;
	}
	.avatar{
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 3%;
	}
	.head{
		display: flex;
		align-items: center;
		width: 100%;
	}
	.contentheader{
		text-indent: 2em;
		margin-bottom: 3%;
	}
	.img{
		display: inline-block;
		width: 30%;
		height: 100px;
		margin-left: 2.5%;
	}
	.nickname{
		width: 35%;
	}
	.createtime{
		width: 50%;
		text-align: right;
	}
</style>